<template>
  <div class="ann-add-wrapper">
    <div class="ann-add-form-wrapper">
      <el-form class="ann-add-form" ref="annAddForm" :model="announcement">
        <el-form-item class="ann-add-form-operation-wrapper">
          <div class="ann-add-form-operation">
            <div style="display: block">请选择公告发布范围</div>
            <div class="ann-add-form-operation-department">
              <span>学院 :  </span>
              <el-select v-model="announcement.departmentId" placeholder="请选择学院">
                <el-option
                        v-for="item in departments"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
              </el-select>
            </div>
            <div class="ann-add-form-operation-major">
              <span>专业 :  </span>
              <el-select v-model="announcement.majorId" placeholder="请选择专业">
                <el-option
                        v-for="item in majors"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
              </el-select>
            </div>
            <div class="ann-add-form-operation-classes">
              <span>班级 :  </span>
              <el-select v-model="announcement.classesId" placeholder="请选择班级">
                <el-option
                        v-for="item in classes"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>
        </el-form-item>
        <el-form-item class="ann-add-form-title">
          <el-tag class="ann-add-form-title-span">
            标题 :
          </el-tag>
          <el-input type="text"
                    placeholder="请输入标题"
                    v-model="text"
                    maxlength="10"
                    show-word-limit></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    name: "AnnAdd",
    data() {
      return {
        announcement: {
          title: '',
          content: '',
          departmentId: null,
          majorId: null,
          classesId: null,
          teacherId: null
        },
        text: '',
        departments: [],
        majors: [],
        majorsByDepartmentId: [],
        classes: [],
        classesByMajorsId: []
      }
    },
    mounted() {
      this.getDepartments()
      this.getMajors()
      this.getClasses()
    },
    methods: {
      //  获取所有学院
      getDepartments() {
        this.getRequest('/annmanagement/annadd/department').then(resp => {
          if (resp) {
            this.departments = resp
          }
        })
      },
      //  获取所有专业
      getMajors() {
        this.getRequest('/annmanagement/annadd/major').then(resp => {
          if (resp) {
            this.majors = resp
            this.majorsByDepartmentId = resp
          }
        })
      },
      //  获取所有班级
      getClasses() {
        this.getRequest('/annmanagement/annadd/classes').then(resp => {
          if (resp) {
            this.classes = resp
            this.classesByMajorsId = resp
          }
        })
      }
    }
  }
</script>

<style lang="less">

  .ann-add-wrapper {

    .ann-add-form-wrapper {
      width: 80%;

      .ann-add-form {

        .ann-add-form-operation-wrapper {

          .ann-add-form-operation {
            display: flex;
            justify-content: space-between;
            padding: 40px 40px;
            width: 100%;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

            .ann-add-form-operation-department {

            }

            .ann-add-form-operation-major {

            }

            .ann-add-form-operation-classes {

            }
          }
        }

        .ann-add-form-title {

          .ann-add-form-title-span {
            display: block;
            padding: 5px 20px;
            height: 36px;
          }
        }
      }
    }
  }
</style>